<template>
  <yd-ls-box>
    <yd-ls-layout title="点赞医生" :onfoot=false :tolfurl="urls" style="background-color: rgb(255,255,255)">
      <div class="yd-ls-height"></div>
      <div class="yd-ls-eval">
        <div class="yd-ls-eval-img">
          <img :src="admiration.head || defalut_img" alt="" />
        </div>
        <p>{{admiration.dr_name}}</p>
        <p>感谢医生的付出，为医生点个赞吧</p>
      </div>

      <div class="yd-ls-evaldetail-box">
        <h3><span>请选择赞赏金额</span></h3>

        <yd-list class="yd-ls-evaldetail-list" theme="4">
          <yd-list-item v-for="(item, index) in admiration.items" :key="index">
            <img slot="img" :src="item.pic_path">
            <span slot="title">{{item.price}}元</span>
            <yd-list-other slot="other">
              <div>{{item.remark}}</div>
              <div>
                <yd-button type="danger" @click.native="sentGift(item.price, item.type, item.zs_id)">送心意</yd-button>
              </div>
            </yd-list-other>
          </yd-list-item>
        </yd-list>
      </div>
      <yd-popup v-model="popups.showTips" position="center" width="80%">
        <div class="yd-ls-evaldetail-tips-box" style="background-color: rgb(255,255,255)">
          {{popups.tipsCon}}
        </div>
        <div class="yd-ls-evaldetail-tips-button" style="background-color: rgb(255,255,255)">
          <div>
            <h3>您需支付：{{popups.tipsPrice}}元</h3>
            <span>需消耗{{popups.tipsPoint}}积分</span>
          </div>
          <yd-button @click.native="fetchPay(0)" bgcolor="rgb(72, 112, 243)" color="#ffffff">去支付</yd-button>
          <yd-button @click.native="fetchPay(1)" :type="popups.tipsBtn">积分兑换</yd-button>
        </div>
      </yd-popup>
      <div class="yd-ls-height"></div>
    </yd-ls-layout>
  </yd-ls-box>
</template>

<style>
.yd-ls-evaldetail-tips-box {
  padding: 10px;
  font-size: .28rem;
  min-height: 2rem;
  line-height: .5rem;
}
.yd-ls-evaldetail-tips-button {
  height: 1rem;
  border-top: 1px solid #999;
}
.yd-ls-evaldetail-tips-button div {
  color: red;
  float: left;
  padding: 5px;
}

.yd-ls-evaldetail-tips-button div h3 {
  font-size: .3rem;
}
.yd-ls-evaldetail-tips-button button {
  float: right;
  height: 1rem;
  font-size: .3rem;
}
.yd-ls-eval {
  width: 100%;
  overflow: hidden;
  text-align: center;
  padding: 0.2rem;
  background-color: rgb(72, 112, 243);
}
.yd-ls-eval .yd-ls-eval-img {
  display: inline-block;
  width: 1.14rem;
  height: 1.14rem;
  overflow: hidden;
  border-radius: 50%;
}
.yd-ls-eval .yd-ls-eval-img img {
  width: 100%;
  height: 100%;
}
.yd-ls-eval p {
  margin-top: 0.1rem;
  font-size: 0.28rem;
  line-height: 0.64rem;
  color: #fff;
}

.yd-ls-evaldetail-box {
  position: relative;
  margin-top: 0.8rem;
}
.yd-ls-evaldetail-box h3 {
  position: relative;
  margin-bottom: 0.8rem;
}
.yd-ls-evaldetail-box h3 span {
  font-style: normal;
  font-weight: 500;
  font-size: .28rem;
  color: #ccc;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -.5rem;
  margin-left: -1.1rem;
  z-index: 10;
  width: 2.2rem;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  background-color: #fff;
}
.yd-ls-evaldetail-box h3:after {
  display: block;
  position: relative;
  width: 80%;
  content: "";
  margin: 0 auto;
  border-bottom: 1px solid #d9d9d9;
}

.yd-ls-evaldetail-list .yd-list-mes {
  line-height: 2rem;
  font-size: .28rem;
}
.yd-ls-evaldetail-list .yd-list-title {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.5rem;
  text-align: center;
}
.yd-list-theme4.yd-ls-evaldetail-list .yd-list-item .yd-list-img {
  width: 1.5rem;
}
.yd-list-theme4.yd-ls-evaldetail-list .yd-list-item:not(:last-child):after {
  border-bottom: 0;
}
</style>
<script>
import ydLsBox from "../../../components/yd-ls-box.vue";
import ydLsLayout from "../../../components/yd-ls-layout.vue";
import ydLsContent from "../../../components/yd-ls-content.vue";
import ydLsButton from "../../../components/yd-ls-button.vue";
import api from "../../../axios/api";

export default {
  name: "eval",
  data() {
    return {
      urls: "",
      admiration: {},
      admirationPost: {
        zs_id: '',
        type: '',
        drid: '',
        points: ''
      },
      evalParams: {
        drid: '',
        rid: '',
        msgid: '',
        drname: '',
        pagename: '',
        type: ''
      },
      popups: {
        showTips: false,
        total: 0,
        tipsCon: '',
        tipsPrice: '',
        tipsPoint: '',
        tipsBtn: 'danger',
        tipsType: ''
      },
      defalut_img: api.default_img_dot, // 医生缺省头像
      defalut_heart: api.default_img_heart, // 心
      defalut_flower: api.default_img_flower, // 花
      defalut_slik: api.default_img_slik // 锦旗
    };
  },
  created() {
    if(this.$route.query.openid){
      localStorage.openId = this.$route.query.openid
    }
    //TODO:初始化数据
    this.evalParams.drid = this.$route.query.drid;
    this.evalParams.rid = this.$route.query.rid;
    this.evalParams.pkid = this.$route.query.pkid;
    this.evalParams.msgid = this.$route.query.msgid || '';
    this.evalParams.drname = this.$route.query.drname || '';
    this.evalParams.type = this.$route.query.type;
    this.evalParams.pagename = this.$route.query.pagename || '';
    this.urls = `index.html#/evals?drid=${this.evalParams.drid}&rid=${this.evalParams.rid}&msgid=${this.evalParams.msgid}&drname=${this.evalParams.drname}&type=${this.evalParams.type}&pagename=${this.evalParams.pagename}`
    this.getAdmirationInfo(this.evalParams.drid)
  },
  methods: {
    init() {
      //TODO:初始化数据
    },
    getAdmirationInfo(drid) {
      this.axios.get(api.admiration_detail, {params: {drid: drid}})
      .then(m=>{
        let admiration_data = m.data
        this.admiration = admiration_data.data
        this.$dialog.loading.close()
      }).catch(err => {
          this.$dialog.loading.close()
          this.$dialog.alert({ mes: 'admiration_detail=' + JSON.stringify(err) })
        });
    },
    sentGift(price, type, zsid) {
      let points = this.admiration.points
      let changePoints = Number(price)*10*10
      this.popups.tipsPoint = changePoints
      this.popups.showTips = true
      this.popups.tipsType = type
      this.popups.tipsPrice = price
      let hasPoint = `可使用${changePoints}积分兑换，你目前积分为${points}，是否需要用积分支付？使用积分兑换后，积分将被扣减！`
      let nonPoint = `目前积分不足以兑换，可直接支付！`
      if((points - changePoints)>=0) {
        this.popups.tipsCon = hasPoint
      } else {
        this.popups.tipsCon = nonPoint
        this.popups.tipsBtn = 'disabled'
      }

      // 获取赞赏对象的相关值
      this.admirationPost.drid = this.admiration.drid
      this.admirationPost.zs_id = zsid
      this.admirationPost.points = changePoints
      this.admirationPost.evaluta_id = this.$route.query.pkid*1
    },
    fetchPay(type) {
      this.admirationPost.type = type
      if(type == 1 && this.popups.tipsBtn == 'disabled') return
      this.$dialog.loading.open(api.default_loading_txt);
      this.axios.post(api.admiration_build, this.admirationPost)
      .then(m=>{
        if(type !== 1) {
          this.gotoPay(m.data.data)
        }else {
          this.popups.showTips = false
          this.getAdmirationInfo(this.evalParams.drid)
        }
      }).catch(err => {
          this.$dialog.loading.close();
          this.$dialog.alert({ mes: 'admiration_build=' + JSON.stringify(err) });
        });
    },
    gotoPay(data) {
      this.popups.showTips = false
      let payinfo = {
          type: 3,
          openid: localStorage.openId,
          total_fee: data.total_fee,
          drid: data.drid,
          orderid: data.order_id,
          patientid: data.mid,
          rid: this.evalParams.rid,
          pkid: this.evalParams.pkid,
          msgid: this.evalParams.msgid,
          drname: this.evalParams.drname,
          pagename: this.evalParams.pagename,
          pagetype: this.evalParams.type
        }

        this.axios.get('http://pay.6ewei.com/pay/payinfo.aspx', {
          params: {
            openid: localStorage.openId,
            payinfo: payinfo
          }
        })
        .then(m=>{
          this.$dialog.loading.close();
          window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbe6733023cdd7b1e&redirect_uri=http%3A%2F%2Fpay.6ewei.com%2Findex.html&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
          // window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbe6733023cdd7b1e&redirect_uri=http://pay.6ewei.com/index.html&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
        }).catch(err => {
          this.$dialog.loading.close();
          this.$dialog.alert({ mes: 'payinfo=' + JSON.stringify(err) });
        });
    }
  },
  mounted() {
    this.init();
  },
  watch: {
    rate(newval) {
      if (this.hasRate) {
        this.hasSuggest = false;
      } else {
        this.hasSuggest = true;
      }
      if (newval * 1 > 0) {
        //TODO：评价标准
        switch (newval * 1) {
          case 1:
            this.ratetxt = '<span style="color:red;">很差</span>';
            break;
          case 2:
            this.ratetxt = '<span style="color:blue;">勉强</span>';
            break;
          case 3:
            this.ratetxt = '<span style="color:green;">一般</span>';
            break;
          case 4:
            this.ratetxt = '<span style="color:black;">挺好</span>';
            break;
          case 5:
            this.ratetxt = '<span style="color:darkgoldenrod;">非常好</span>';
            break;
        }
      }
    }
  },
  components: { ydLsBox, ydLsLayout, ydLsContent, ydLsButton }
};
</script>
